{% extends "base_site.html" %}
{% load rrd_extras %}

{% block content %}

{% if dashboard.des %}
       <div class="system-message">{{ dashboard.des|safe }}  </div>
{% endif %}
<div id="data" style="width:900px;float:left;">
{% if showAlarms %}
<fieldset class="module aligned ">
	<input type="button" value="Hide Already Alarms" id="showAlarms" name="ahowalerms" />&nbsp
	<input type="button" value="Show Last 24 Hours Alarms" onclick="location.href='/alarm'" /> 
	<div id="showAlarms_div" style="display:block;">
		<table>
			<tr>
				<th>Time</th><th>Title</th><th>Widget</th><th>Alarm level</th><th>Alarm mode</th><th>Ticket ID</th><th>Overdue</th><th>Contact result</th><th>Alarm users</th>
			</tr>
				{% for alarmlog in alarmlogs %}
			<tr>
				<td>{{ alarmlog.created_on|date:"m-d H:i:s" }}</td>
				<td>{{ alarmlog.title.title }}</td>
				<td>{{ alarmlog.widget.title }}</td>
				<td>
						{% if alarmlog.alarmlevel == 2 %}
					<div style="background-color:#AAAAFF;" >{{ alarmlog.alarmlevel }} th</div>
						{% else %}
						{% if alarmlog.alarmlevel == 3 %}
					<div style="background-color:red;" >{{ alarmlog.alarmlevel }} th</div>
						{% else %}
						{% if alarmlog.alarmlevel == 4 %}
					<div style="background-color:yellow;" >{{ alarmlog.alarmlevel }} th</div>
						{% else %}
						{% if alarmlog.alarmlevel == 5 %}
					<div style="background-color:#BE77FF;" >{{ alarmlog.alarmlevel }} th</div>
						{% else %}
						{% if alarmlog.alarmlevel == 6 %}
					<div style="background-color:#FFD306;" >{{ alarmlog.alarmlevel }} th</div>
						{% else %}
					<div style="background-color:#9AFF02;" >{{ alarmlog.alarmlevel }} th</div>
						{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}
				</td>
				<td>
						{% if alarmlog.alarmmode == "email" %}
					<div style="background-color:#FFD306;" >{{ alarmlog.alarmmode }}</div>
						{% else %}
						{% if alarmlog.alarmmode == "sms" %}
					<div style="background-color:red;" >{{ alarmlog.alarmmode }}</div>
						{% else %}
					<div style="background-color:#9AFF02;" >{{ alarmlog.alarmmode }}</div>
						{% endif %}
						{% endif %}
				</td>
				<td><a href="/ticket/show/{{ alarmlog.ticketid }}" >{{ alarmlog.ticketid }}</a></td>
				<td>{% if alarmlog.overdue == "1" %}Not{% else %}<div style="background-color:#9AFF02;" >Yes</div>{% endif %}</td>
				<td>
						{% if alarmlog.contact_result == "fail" %}
					<div style="background-color:red;" >{{ alarmlog.contact_result }}</div>
						{% else %}
						{{ alarmlog.contact_result }}
						{% endif %}
				</th>
				<td>
						{% for user in alarmlog.alarmuser.all %}
						{{ user.name }}
						{% endfor %}
				</td>
			</tr>
				{% endfor %}
		</table>
	</div>
</fieldset>
{% endif %}

<style>
th {width:50px;}
</style>

{% regroup dashboard.widget_set.all|dictsort:"category.title" by category as widgets %}
	
{% for category in widgets %}

	{% for widget in category.list|dictsort:"title" %}
	{% if "errornote" in widget|show_widget_title|safe or "errornote" in widget|show_widget_with_current_value|safe or "errornote" in widget|show_widget_with_current_and_past_value|safe or "error" in widget|show_widget_title|safe or "error" in widget|show_widget_with_current_value|safe or "error" in widget|show_widget_with_current_and_past_value|safe%}
	{% ifchanged %}

	<h2>{{ category.grouper }}</h2>
	
	<table>
	{% if category.list.0.widget_type == "1" %}
	<tr>
		<th></th>
		{{ category.list.0|show_widget_header|safe|title }}
		<th>Graph</th>
	</tr>
	{% endif %}
	{% if category.list.0.widget_type == "2" %}
	<tr>
		<th></th>
		<th>Latest</th>
		<th>Yesterday</th>
		<th>Last Week</th>
		<th>Graph</th>
	</tr>
	{% endif %}
	{% endifchanged  %}
	<tr>
		<th>{{ widget|show_widget_title|safe }}</th>
		{% if widget.widget_type == "1" %}
			{{ widget|show_widget_with_current_value|safe }}
		{% endif %}
		{% if widget.widget_type == "2" %}
			{{ widget|show_widget_with_current_and_past_value|safe }}
		{% endif %}
		<td><a href="/dashboard/{{ dashboard.id }}/widget/{{ widget.id }}/graph" target="_blank">View</a></td>
	</tr>
	{% endif %}
	{% endfor %}
</table>
{% endfor %}
</div>
<div id="imgall" style="width:{{ imgsDivWidth }}px;float:right;">
{% for img in imgs %}
<img src="/grahaiderimg/{{ img.id }}/w/{{ dashboard_error.width }}/h/{{ dashboard_error.height }}/start/{{ startTime }}/end/{{ endTime }}" height={{ dashboard_error.height }} width={{ dashboard_error.width }} />
{% endfor %}
</div>
<script type="text/javascript" src="/media/js/jquery.min.js"></script>
<script type="text/javascript"> 

$(document).ready( function() { 
	$("#imgall").click(function(){
	    if ($("#imgall").width() == {{ imgsDivWidth }})
	    {
			$("#data").width();
			$("#imgall").width(5);
	    }
		else {
			$("#data").width(900);
			$("#imgall").width({{ imgsDivWidth }});
		}
	});
});
</script>

<script language="javascript"> 
    function reload()
    {
        location.reload(true);
    }
    $(function() {
            setTimeout(reload, 60000);
    })
</script>

<script type="text/javascript"> 
$(function() {
	$("#showAlarms").click(function(){
		if ($("#showAlarms_div").is(":visible")==true){
			$("#showAlarms").val("Show Already Alarms");
			$("#showAlarms_div").toggle();
			
		}else{
			$("#showAlarms").val("Hide Already Alarms");
			$("#showAlarms_div").toggle();
		}
	});
});
</script>

{% endblock %}

